<template>
	<div class="inOutjianguan" ref='inOutjianguan'>
		<h2 class="titleSelf">跨境电商进出口业务货值年度走势</h2>
		<div class="contentSelf">
			<div ref="inOutjianguanChart" class="inOutjianguanChart"></div>
		</div>

	</div>

</template>

<script>
	export default {
		name: 'inOutjianguan',
		components: {

		},
		data() {
			return {

			}
		},
		mounted() {
			var that = this;
			that.getEchartData()
			setInterval(function() {
				that.getEchartData()
			}, 30000)
		},
		methods: {
			// 千分位逗号隔开（,）that.commonFunction.formatNumberRgx(num)
			// 获取当前日期that.commonFunction.formatDate() 
			// 获取明天that.commonFunction.getTomorrowDate();

			// 当前日期的下个月that.commonFunction.getNextMonth()
			// 当前日期的前一个月that.commonFunction.getPreMonth()
			// 获取当前日期的前一年的年月日that.commonFunction.getLastYearYestdy() 
			getEchartData() {
				const inOutjianguanChart = this.$refs.inOutjianguanChart;
				if (inOutjianguanChart) {
					const myChart = this.$echarts.init(inOutjianguanChart)
					var that = this;
					var startDate = that.commonFunction.formatDate()[0] - 6;
					var endDate = that.commonFunction.formatDate()[0];
					that.$myHttp.get("getBusinessTrendsInfo", {
						params: {
							start: "2015",
							// start: startDate ,
							end: endDate,
							dtype: "Y"
						}
					}).then(function(data0) {
						if (data0.status == "200") {
							var dataYear = [];
							var dataValue = [];
							var dataArr = data0.data.result.hn_business_trends;
							dataArr.forEach(function(dd) {
								dataYear.push(dd.REPORTDATE);
								dataValue.push((dd.GOODVALUE / 100000000).toFixed(2));
								// dataValue.push(0);
							});
							// console.log(dataYear);
							// console.log(dataValue);
							const dataSet = [];

							dataSet[0] = dataYear;
							dataSet[1] = dataValue;
							console.log(dataSet[1])
							// console.log(dataSet);
							// const dataSet = [
							//   ['2017', '2018', '2019', '2020', '2021'],
							//   [123, 60, 25, 18, 12]
							// ];

							const option = {
								grid: {
									left: '10%',
									top: '20%',
									bottom: '20%',
									right: '10%'
								},
								itemStyle: {

									borderType: 'solid',
									borderColor: '#00fce6',
									// borderWidth: 2 ,
								},
								legend: {
									show: true,
									icon: "plain",
									top: "top",
									right: "10%",
									orient: 'vertical',
									itemWidth: that.commonFunction.fontSize(0.2),
									itemHeight: that.commonFunction.fontSize(0.1),
									itemGap: that.commonFunction.fontSize(0.1),
									textStyle: {
										color: '#fff',
										fontSize: that.commonFunction.fontSize(0.12),
									}


								},
								xAxis: {
									data: dataSet[0],
									axisTick: {
										show: false
									},
									axisLine: {
										show: false,
										lineStyle: {
											color: '#00fce6',
											width: 1 //这里是为了突出显示加上的
										}
									},
									axisLabel: {
										textStyle: {
											color: '#00fce6',
											fontSize: that.commonFunction.fontSize(0.12)
										}
									}
								},
								yAxis: [{
									name: "货值(亿元)",
									nameTextStyle: {
										color: '#00fce6',
										fontSize:that.commonFunction.fontSize(0.12)
									},
									axisTick: {
										show: false
									},
									axisLine: {
										show: false,
										lineStyle: {
											color: '#00fce6',
											width: 1 //这里是为了突出显示加上的
										}
									},
									axisLabel: {
										textStyle: {
											color: '#00fce6',
											fontSize:that.commonFunction.fontSize(0.12)
										}
									},
									splitArea: {
										areaStyle: {
											color: '#00fce6'
										}
									},
									splitLine: {
										show: false,
										lineStyle: {
											color: '#00fce6',
											width: 0.5,
											type: 'dashed'
										}
									}
								}],

								series: [{
									name: '货值',
									type: 'pictorialBar',
									barCategoryGap: '0%',
									symbol: 'triangle',
									barMinHeight:1,//数据都是0 的时候设置一个最小柱体可以防止默认柱体显示
									barWidth: that.commonFunction.fontSize(0.26),
									// label: {
									//     show: true,
									//     position: 'top',
									//     distance: 15,
									//     color: '#DB5E6A',
									//     fontWeight: 'bolder',
									//     fontSize: 20,
									// },
									itemStyle: {
										normal: {
											color: {
												type: 'linear',
												x: 0,
												y: 0,
												x2: 0,
												y2: 1,
												colorStops: [{
														offset: 0,
														color: 'rgba(4,229,214,.8)' //  0%  处的颜色
													},
													{
														offset: 1,
														color: 'rgba(4,229,214,.2)' //  100%  处的颜色
													}
												],
												global: false //  缺省为  false
											},
											borderColor: '#08DFFE',
											borderWidth: 1,
											borderType: 'solid',

										},
										emphasis: {
											opacity: 1
										}
									},
									data: dataSet[1],
									z: 10
								}]

							};
							myChart.setOption(option)
							window.addEventListener("resize", function() {
								myChart.resize()
							})
						} else {
							alert("数据请求错误")
						}

					}).catch(function(error) {
						alert(error)
					});

				}
			}
		}
	}
</script>

<style scoped>
	.inOutjianguan {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.inOutjianguanChart {
		width: 100%;
		height: 100%;
		background: url(../../../../static/img/wangge.png) no-repeat;
	}
</style>
